<template>
	<view class="send-rapir-info-warpper">
		<view class="left">
			<view class="text-icon" :class="TextIconClass">
				{{text}}
			</view>
		</view>
		<view class="center u-flex-1">
			<view class="text text-main">
				{{info.addr}}
			</view>
			<view class="text text-minor">
				{{info.department}}
			</view>
			<view class="text text-minor">
				{{info.user}} {{info.phone}}
			</view>
		</view>
		<view class="right">
			<HIcon icon="phone-fill" :block="false" type="fill" size="medium" @click="onCallPhone"></HIcon>
		</view>

	</view>
</template>

<script>
	import HIcon from '@/components/button/circleIcon.vue'
	export default {
		components: {
			HIcon
		},
		props: {
			text: {
				type: String,
				default: '送'
			},
			// green , black
			color: {
				type: String,
				default: 'black'
			},

			info: {
				type: Object,
				default: () => {
					return {
						addr: '',
						department: '',
						user: '',
						phone: ''
					}
				}
			}
		},
		computed: {
			TextIconClass() {
				let className = ''
				if (this.color == 'black') {
					className = 'pick'
				} else {
					className = 'receive'
				}
				return `text-icon-${className}`
			}
		},

		methods: {
			onCallPhone() {

				if (this.info.phone) {
					wx.makePhoneCall({
						phoneNumber: this.info.phone
					})

				} else {
					wx.showToast({
						title: "电话为空",
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.send {
		&-rapir {
			&-info {
				&-warpper {
					display: flex;
					padding: 30rpx 0;

				}
			}
		}
	}


	.center {
		padding-left: 30rpx;
	}

	.text {
		font-weight: 400;
		font-size: 28rpx;

		&+& {
			margin-top: 20rpx;
		}

		&-icon {
			width: 48rpx;
			height: 48rpx;
			border-radius: 16rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;

			&-pick {
				background-color: #0F2E4D;
				color: #fff;
			}

			&-receive {
				background-color: #07C160;
				color: #fff;
			}
		}

		&-mian {
			color: #0F2E4D;
		}

		&-minor {
			color: #98A5B3;
		}
	}
</style>
